<template>
	<view class="chat" :chatMsg="chatMsg" :change:chatMsg="inputMsg">
		<!-- 顶部标题 -->
		<!-- #ifndef H5 -->
		<tn-navbar :center="true" opacity="0.8" text-color="#000">
			2.5GpT？？
			<template #back />
		</tn-navbar>
		<!-- #endif -->
		<scroll-view :style="{ height: `${windowHeight - inputHeight - 180}rpx` }" id="scrollview" scroll-y="true" :scroll-top="scrollTop" class="scroll-view">
			<!-- 聊天主体 -->
			<view id="msglistview" class="chat-body">
				<!-- 聊天记录 -->
				<view v-for="(item, index) in msgList" :key="index">
					<!-- 自己发的消息 -->
					<view class="item self" v-if="item.userContent != ''">
						<!-- 文字内容 -->
						<view class="content right">
							<MsgItem :msg="item.userContent"></MsgItem>
							<!-- <zero-markdown-view :markdown="item.userContent"></zero-markdown-view> -->
						</view>
						<!-- 头像 -->
						<image class="avatar" src="/static/user.jpg"></image>
					</view>
					<!-- 机器人发的消息 -->
					<view class="item Ai" v-if="item.botContent != ''">
						<!-- 头像 -->
						<image class="avatar" src="/static/p.jpeg"></image>
						<!-- 文字内容 -->
						<view class="content left">
							<MsgItem :msg="item.botContent"></MsgItem>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 底部消息发送栏 -->
		<!-- 用来占位，防止聊天消息被发送框遮挡 -->
		<Footer></Footer>
	</view>
</template>
<script setup>
import Footer from './footer/index.vue';
import MsgItem from './msgItem/index.vue';
import { ref, reactive, onMounted, onUpdated, computed } from 'vue';
const systemInfo = uni.getSystemInfoSync();
const keyboardHeight = ref(0);
const bottomHeight = ref(0);
const scrollTop = ref(0);
const userId = ref('');
const chatMsg = ref('');
const msgList = reactive([
	{
		botContent: '派总，在线整活😈😈',
		userContent: '',
		image: '/static/p.jpg'
	},
	{
		botContent: '',
		userContent: '你好呀，非常高兴认识你',
		image: '/static/user.jpg'
	}
]);

const windowHeight = computed(() => {
	return rpxTopx(systemInfo.windowHeight);
});

const inputHeight = computed(() => {
	return bottomHeight.value + keyboardHeight.value;
});

const rpxTopx = (px) => {
	const deviceWidth = systemInfo.windowWidth;
	const rpx = (750 / deviceWidth) * Number(px);
	return Math.floor(rpx);
};

const scrollToBottom = () => {
	setTimeout(() => {
		const query = uni.createSelectorQuery();
		query.select('#scrollview').boundingClientRect();
		query.select('#msglistview').boundingClientRect();
		query.exec((res) => {
			if (res[1].height > res[0].height) {
				scrollTop.value = rpxTopx(res[1].height - res[0].height);
			}
		});
	}, 15);
};

const handleSend = (chatMsg) => {
	if (chatMsg && !/^\s+$/.test(chatMsg)) {
		const obj = {
			botContent: '',
			userContent: chatMsg,
			image: '/static/user.jpg'
		};
		msgList.push(obj);
		scrollToBottom();
	} else {
		uni.showToast({
			title: '不能发送空白消息',
			icon: 'none'
		});
	}
};
const pushMsg = (str) => {
	const obj = {
		botContent: '',
		userContent: str,
		image: '/static/user.jpg'
	};
	msgList.push(obj);
	chatMsg.value = '';
	scrollToBottom();
};
const receiveMsg = (msg) => {
	if (msgList.length > 0) {
		msgList[msgList.length - 1].botContent += msg;
		scrollToBottom();
	}
};
onMounted(() => {
	// #ifdef APP||MP-WEIXIN
	uni.onKeyboardHeightChange((res) => {
		keyboardHeight.value = rpxTopx(res.height);
		if (keyboardHeight.value < 0) keyboardHeight.value = 0;
	});
	// #endif
	sendHeight();
	scrollToBottom();
	uni.$on('sendMsg', handleSend);
	uni.$on('receiveMsg', receiveMsg);
});

onUpdated(() => {
	scrollToBottom();
});

const sendHeight = () => {
	setTimeout(() => {
		const query = uni.createSelectorQuery();
		query.select('.send-msg').boundingClientRect();
		query.exec((res) => {
			bottomHeight.value = rpxTopx(res[0].height);
		});
	}, 10);
};

const goback = () => {
	uni.switchTab({
		url: '/pages/tutorship/tutorship'
	});
};

const focus = () => {
	scrollToBottom();
};

const blur = () => {
	scrollToBottom();
};
const toast = (title) => {
	console.log('title', title);
	uni.showToast({
		title
	});
};

defineExpose({
	toast
});
</script>

<style lang="scss" scoped>
$chatContentbgc: #c2dcff;
$sendBtnbgc: #4f7df5;

view,
button,
text,
input,
textarea {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 聊天消息 */
.chat {
	.topTabbar {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		margin-top: 80rpx;
		justify-content: space-between;

		.icon {
			margin-left: 20rpx;
		}

		.text {
			margin: auto;
			font-size: 16px;
			font-weight: 700;
		}

		.button {
			width: 10%;
			margin: auto 20rpx auto 0rpx;
		}
	}
	.scroll-view {
		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
			color: transparent;
		}

		// background-color: orange;
		background-color: #f6f6f6;

		.chat-body {
			display: flex;
			flex-direction: column;
			padding-top: 23rpx;
			// background-color:skyblue;

			.self {
				justify-content: flex-end;
			}
			.item {
				display: flex;
				padding: 23rpx 30rpx;
				// background-color: greenyellow;

				.right {
					background-color: $chatContentbgc;
				}
				.left {
					background-color: #ffffff;
				}
				// 聊天消息的三角形
				.right::after {
					position: absolute;
					display: inline-block;
					content: '';
					width: 0;
					height: 0;
					left: 100%;
					top: 10px;
					border: 12rpx solid transparent;
					border-left: 12rpx solid $chatContentbgc;
				}

				.left::after {
					position: absolute;
					display: inline-block;
					content: '';
					width: 0;
					height: 0;
					top: 10px;
					right: 100%;
					border: 12rpx solid transparent;
					border-right: 12rpx solid #ffffff;
				}

				.content {
					position: relative;
					max-width: 486rpx;
					border-radius: 8rpx;
					word-wrap: break-word;
					// padding: 20rpx 24rpx;
					margin: 0 24rpx;
					border-radius: 5px;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
				}

				.avatar {
					display: flex;
					justify-content: center;
					width: 78rpx;
					height: 78rpx;
					background: $sendBtnbgc;
					border-radius: 50rpx;
					overflow: hidden;

					image {
						align-self: center;
					}
				}
			}
		}
	}

	/* 底部聊天发送栏 */
	.chat-bottom {
		width: 100%;
		height: 100rpx;
		background: #f4f5f7;
		transition: all 0.1s ease;

		.send-msg {
			display: flex;
			align-items: flex-end;
			padding: 16rpx 30rpx;
			width: 100%;
			min-height: 177rpx;
			position: fixed;
			bottom: 0;
			background: #fff;
			transition: all 0.1s ease;
		}

		.uni-textarea {
			padding-bottom: 70rpx;
			textarea {
				width: 537rpx;
				min-height: 75rpx;
				max-height: 500rpx;
				background: #f1f1f1;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				color: #333333;
				line-height: 74rpx;
				padding: 5rpx 8rpx;
				text-indent: 30rpx;
			}
		}

		.send-btn {
			margin-bottom: 76rpx;
			margin-left: 25rpx;
			width: 120rpx;
			height: 75rpx;
		}
	}
}
</style>
